<template>
  <el-form-item v-bind="formItemAttr" :prop="schema.prop">
    <el-input clearable v-bind="{ ...$attrs, ...inputAttr }" @change="change" style="width: 100%;"> </el-input>
  </el-form-item>
</template>

<script setup>
import { ref, watchEffect } from 'vue'
import { lowCodeAttr } from '../../common/util'
defineOptions({ name: 'InputCom' })

const props = defineProps({
  schema: {
    type: Object,
    required: true
  }
})

const inputAttr = ref({})
const formItemAttr = ref({})

watchEffect(() => {

  const schema = props.schema
  const inputType = schema.type.split('-')[1]
  
  inputAttr.value.type = inputType
  
  const formItemAttrs = ['label', 'prop', 'labelWidth']
  
  for (const key in schema) {
    if (!lowCodeAttr.includes(key)) {
      const value = schema[key]
      if (formItemAttrs.includes(key)) {
        formItemAttr.value[key] = value
      } else {
        inputAttr.value[key] = value
      }
    }
  }
})

function change(e) {
  const value = {
    schema: props.schema,
    value: e
  }
  if (props.schema?.event?.change) {
    props.schema.event.change(value)
  }
}
</script>
